<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { PzGetOutputDTO } from '@/api/xtpz-dto'
import xtpzService from '@/api/xtpz'
// 入参
const loading = ref<boolean>(false)
// 生命周期
onMounted(() => {
  // 获取已配置功能
  init()
})

/**
 * 初始化
 */
const init = () => {
  getYpz()
}

/*
 * 获取已配置功能
 */
const getYpz = () => {
  loading.value = true
  xtpzService
    .getGnpz()
    .then((res) => {
      form.value = res.data
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

/*
 * 保存数据
 */
const saveData = (formEl: any) => {
  if (!formEl) return
  formEl.validate((valid: any) => {
    if (valid) {
      const params = {
        ajtgqxts: form.value.ajtgqxts,
        gdqxts: form.value.gdqxts,
        gdtxts: form.value.gdtxts,
        jgtxts: form.value.jgtxts,
        shthqxts: form.value.shthqxts,
        shthtxts: form.value.shthtxts,
        ajtgtxts: form.value.ajtgtxts,
        stjytxts: form.value.stjytxts,
      }
      loading.value = true
      xtpzService
        .saveGnpz(params)
        .then((res) => {
          if (res.code !== 0) {
            return ElMessage({ type: 'error', message: res.message })
          }
          ElMessage.success('保存成功')
        })
        .catch((err) => {
          !err.isError && ElMessage({ type: 'warning', message: err.message })
        })
        .finally(() => {
          loading.value = false
        })
    }
  })
}

/* 表单数据 */
const form = ref<PzGetOutputDTO>({
  gdqxts: 0,
  gdtxts: 0,
  jgtxts: 0,
  shthqxts: 0,
  ajtgqxts: 0,
  shthtxts: 0,
  ajtgtxts: 0,
  stjytxts: 0,
})
/* 表单校验规则 */
const rules = ref({
  gdqxts: [{ required: true, message: '请填写', trigger: 'blur' }],
  gdtxts: [{ required: true, message: '请填写', trigger: 'blur' }],
  jgtxts: [{ required: true, message: '请填写', trigger: 'blur' }],
  shthqxts: [{ required: true, message: '请填写', trigger: 'blur' }],
  ajtgqxts: [{ required: true, message: '请填写', trigger: 'blur' }],
  shthtxts: [{ required: true, message: '请填写', trigger: 'blur' }],
  ajtgtxts: [{ required: true, message: '请填写', trigger: 'blur' }],
  stjytxts: [{ required: true, message: '请填写', trigger: 'blur' }],
})
const ruleFormRef = ref()

defineExpose({ init })
</script>
<template>
  <div class="container" v-loading="loading">
    <div class="header">
      <el-button type="primary" @click="saveData(ruleFormRef)">保存</el-button>
    </div>
    <div class="content">
      <div class="top">
        <div class="title">超期预警</div>
        <el-form
          :model="form"
          label-width="180"
          style="max-width: 400px"
          label-position="left"
          :rules="rules"
          ref="ruleFormRef"
        >
          <el-form-item prop="gdqxts">
            <template v-slot:label>
              <span>归档期限天数</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="案件办结后xx天需要完成归档审核，未完成属于超期。"
                placement="right"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </template>
            <el-input-number :controls="false" placeholder="请输入" v-model="form.gdqxts" />
          </el-form-item>
          <el-form-item prop="gdtxts">
            <template v-slot:label>
              <span>归档提醒天数</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="案件办结后xx天开始归档提醒。"
                placement="right"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </template>
            <el-input-number :controls="false" placeholder="请输入" v-model="form.gdtxts" />
          </el-form-item>
          <el-form-item prop="shthqxts">
            <template v-slot:label>
              <span>审核退回期限天数</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="归档审核退回后xx天需要重新提交归档审核，未提交属于超期。"
                placement="right"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </template>
            <el-input-number :controls="false" placeholder="请输入" v-model="form.shthqxts" />
          </el-form-item>

          <el-form-item prop="shthtxts">
            <template v-slot:label>
              <span>审核退回提醒天数</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="归档审核退回后XX天开始归档消息提醒。"
                placement="right"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </template>
            <el-input-number :controls="false" placeholder="请输入" v-model="form.shthtxts" />
          </el-form-item>

          <el-form-item prop="ajtgqxts">
            <template v-slot:label>
              <span>案卷退改期限天数</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="退改审批通过后xx天需要重新提交归档审核，未提交属于超期。"
                placement="right"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </template>
            <el-input-number :controls="false" placeholder="请输入" v-model="form.ajtgqxts" />
          </el-form-item>

          <el-form-item prop="ajtgtxts">
            <template v-slot:label>
              <span>案卷退改提醒天数</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="案卷退改审核通过后XX天开始归档消息提醒。"
                placement="right"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </template>
            <el-input-number :controls="false" placeholder="请输入" v-model="form.ajtgtxts" />
          </el-form-item>

          <el-form-item prop="stjytxts">
            <template v-slot:label>
              <span>实体借阅提醒天数</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="实体借阅还剩XX天到期时开始消息提醒。"
                placement="right"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </template>
            <el-input-number :controls="false" placeholder="请输入" v-model="form.stjytxts" />
          </el-form-item>

          <el-form-item prop="jgtxts">
            <template v-slot:label>
              <span>间隔提醒天数</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="每隔xx天提醒一次。"
                placement="right"
              >
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </template>
            <el-input-number :controls="false" placeholder="请输入" v-model="form.jgtxts" />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // align-items: center;
  .header {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #d3d3d3;
  }
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    .top {
      // border-bottom: 1px solid #d3d3d3;
      margin-top: 10px;
      .title {
        padding: 10px 0;
        font-weight: 700;
        font-size: 16px;
      }
    }
    // .center {
    //   border-bottom: 1px solid #d3d3d3;
    //   margin-top: 5px;
    // }
    // .bottom {
    //   // border-bottom: 1px solid #d3d3d3;
    //   margin-top: 5px;
    //   .bottom-input {
    //     display: flex;
    //   }
    // }
    p {
      font-weight: 700;
      line-height: 32px;
      letter-spacing: 0px;
      font-size: 14px;
    }
  }
}
</style>
